<template>
  <el-button size="large" :loading="loading" :disabled="testId === null || testId === 0" @click="showInfoDialog=true">查看试题</el-button>
  <el-dialog v-model="showInfoDialog" title="查看试题" width="1000px">
    <el-form>
      <el-form-item>
        成绩：{{ testData['scoreTotal'] }} / {{ testData['maxScore'] }} 分<br>
        及格分：{{ testData['passScore'] }} 分
      </el-form-item>
      <el-divider></el-divider>
      <el-form-item v-for="(question, index) in testData['questionAnswerList']" :key="index" style="margin-bottom: 0">
        <el-row style="text-align: left">
          <el-col>
            <el-tag>{{ question['questionGroupType'] }}</el-tag>&nbsp;
            <el-tag type="success">{{ question['questionGroupName'] }}</el-tag>&nbsp;
            <el-tag type="info">{{ question['score'] }} 分</el-tag>&nbsp;
          </el-col>
          <el-col>
            {{ index + 1 }}.{{ convertType(question.type) }}{{
              question.title
            }}{{ question['remark'] !== null && question['remark'] !== '' ? '注：' + question['remark'] : '' }}
            <div style="text-align: center">
              <el-checkbox-group v-if="question.type === 1" v-model="question.userAnswer" disabled>
                <el-checkbox v-for="(option, index) in question.options" :key="index"
                             :label="option.order.toString()">
                  {{ option.content }}
                </el-checkbox>
              </el-checkbox-group>
              <el-radio-group v-else-if="question.type === 0" v-model="question.userAnswer[0]" disabled>
                <el-radio v-for="(option, index) in question.options" :key="index" :label="option.order.toString()">
                  {{ option.content }}
                </el-radio>
              </el-radio-group>
              <el-radio-group v-else v-model="question.userAnswer[0]" disabled>
                <el-radio label="0">错</el-radio>
                <el-radio label="1">对</el-radio>
              </el-radio-group>
            </div>
          </el-col>
          <el-col>
            得分：{{ question['userScore'] !== null ? question['userScore'] + ' 分' : '' }}
          </el-col>
        </el-row>
        <el-divider></el-divider>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="showInfoDialog = false">关闭</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { defineProps, ref, watch } from 'vue'
import { viewTest } from '@/api/admin'

const convertType = (type: number) => {
  switch (type) {
    case 0:
      return '（单选）'
    case 1:
      return '（多选）'
    case 2:
      return '（判断）'
  }
}
const showInfoDialog = ref<boolean>(false)
const props = defineProps<{ testId: any }>()
const testData: any = ref(null)
const loading = ref(false)
const updateData = (value: any) => {
  if (value) {
    loading.value = true
    viewTest(value).then(resp => {
      testData.value = resp.data.data
    }).finally(() => {
      loading.value = false
    })
  }
}
updateData(props.testId)
watch(
  () => props.testId,
  (newValue) => {
    updateData(newValue)
  }
)
</script>

<style scoped>

</style>
